<template>
  <view class="account-security">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-button" @click="handleBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="title">账号安全</text>
    </view>
    
    <view class="content">
      <!-- 账号绑定 -->
      <view class="section">
        <view class="section-title">账号绑定</view>
        <view class="menu-list">
          <view class="menu-item" @click="handleBindPhone">
            <view class="menu-item-left">
              <uni-icons type="phone" size="20" color="#2979ff" />
              <text class="menu-item-text">手机绑定</text>
            </view>
            <view class="menu-item-right">
              <text class="menu-item-desc">{{ userInfo.tel || '未绑定' }}</text>
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleBindEmail">
            <view class="menu-item-left">
              <uni-icons type="email" size="20" color="#2979ff" />
              <text class="menu-item-text">邮箱绑定</text>
            </view>
            <view class="menu-item-right">
              <text class="menu-item-desc">未绑定</text>
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleThirdParty">
            <view class="menu-item-left">
              <uni-icons type="weixin" size="20" color="#2979ff" />
              <text class="menu-item-text">第三方账号</text>
            </view>
            <view class="menu-item-right">
              <text class="menu-item-desc">微信已绑定</text>
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 安全登录 -->
      <view class="section">
        <view class="section-title">安全登录</view>
        <view class="menu-list">
          <view class="menu-item" @click="handleLoginRecord">
            <view class="menu-item-left">
              <uni-icons type="calendar" size="20" color="#2979ff" />
              <text class="menu-item-text">登录记录</text>
            </view>
            <view class="menu-item-right">
              <uni-icons type="right" size="16" color="#999999" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleLoginNotify">
            <view class="menu-item-left">
              <uni-icons type="notification" size="20" color="#2979ff" />
              <text class="menu-item-text">异常登录提醒</text>
            </view>
            <view class="menu-item-right">
              <switch :checked="loginNotify" @change="handleLoginNotifyChange" color="#2979ff" />
            </view>
          </view>
          
          <view class="menu-item" @click="handleBiometrics">
            <view class="menu-item-left">
              <uni-icons type="fingerprint" size="20" color="#2979ff" />
              <text class="menu-item-text">生物识别</text>
            </view>
            <view class="menu-item-right">
              <switch :checked="biometrics" @change="handleBiometricsChange" color="#2979ff" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 页面配置
defineOptions({
  navigationBarTitleText: '账号安全'
})

// 用户信息
const userInfo = ref({
  tel: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).tel : ''
})

// 开关状态
const loginNotify = ref(false)
const biometrics = ref(false)

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 绑定手机
const handleBindPhone = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 绑定邮箱
const handleBindEmail = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 第三方账号
const handleThirdParty = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 登录记录
const handleLoginRecord = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

// 异常登录提醒开关
const handleLoginNotifyChange = (e) => {
  loginNotify.value = e.detail.value
  uni.showToast({
    title: loginNotify.value ? '已开启异常登录提醒' : '已关闭异常登录提醒',
    icon: 'none'
  })
}

// 生物识别开关
const handleBiometricsChange = (e) => {
  biometrics.value = e.detail.value
  uni.showToast({
    title: biometrics.value ? '已开启生物识别' : '已关闭生物识别',
    icon: 'none'
  })
}
</script>

<style lang="scss">
.account-security {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    padding-top: 65rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 100;
    
    .back-button {
      position: absolute;
      left: 32rpx;
      bottom: 8rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      width: 100%;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #000;
      margin-bottom: 8rpx;
    }
  }
  
  .content {
    padding-top: 165rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: 20rpx;
    
    .section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 30rpx;
        color: #666;
        padding: 20rpx;
      }
      
      .menu-list {
        background-color: #fff;
        border-radius: 12rpx;
        
        .menu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30rpx 20rpx;
          border-bottom: 1rpx solid #f5f5f5;
          
          &:last-child {
            border-bottom: none;
          }
          
          .menu-item-left {
            display: flex;
            align-items: center;
            
            .menu-item-text {
              font-size: 30rpx;
              color: #333;
              margin-left: 20rpx;
            }
          }
          
          .menu-item-right {
            display: flex;
            align-items: center;
            
            .menu-item-desc {
              font-size: 26rpx;
              color: #999;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style> 